<template>
    <div  class="qualified">
        <div class="title">
            <div class="title-left">
                <span>合格率</span>
                <img src="../../../assets/show-title-bg.png">
            </div>
        
        </div>
        <img src="../../../assets/chart-data-bg.png">
        <div class="qualified-status">
            <span>初支质量检测合格率</span>
            <span>二衬质量检测合格率</span>
        </div>

        <div class="qualified-data">
            <div class="qualified-data-view">
                <div :style="{ zoom: zoom }" id="qualified-data-view-left" class="qualified-data-view-left">

                </div>
                <div :style="{ zoom: zoom }" id="qualified-data-view-right" class="qualified-data-view-right">

                </div>
            </div>

        </div>
    </div>
</template>

<script>
import api from "../../../api";
import * as echarts from 'echarts';
export default {
    name: '',
    components: {},
    data() {
        return {
            leftChart: {},
            rightChart: {},
            zoom: 1
        }
    },
    created() {
        const _this = this
        _this.zoom = (1 / _this.pxzoom().zoom)
    },
    mounted() {

        this.$bus.$on("qualified", (row) => {
            api.bigdataqualified({tid:row}).then(res=>{
                if(res.data.code == 2001){
                    this.$charts.ChuMap("qualified-data-view-left", res.data.data.chu);
                    this.$charts.ErMap("qualified-data-view-right", res.data.data.er);
                }
            }).catch(err=>{
                console.log(err)
            })
        })
    },
    methods: {
    },
}
</script>

<style lang="scss" scoped>
.qualified {
    width: 100%;
    height: 100%;
    padding-right: 20px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    >img {
        width: 100%;
        height: 80%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    >.title {
        width: 100%;
        height: 43px;
        padding-right: 30px;
        position: relative;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >span {
            color: #CECECE;
            font-size: 18px;
        }

        >.title-left {
            width: 218px;
            height: 43px;
            display: flex;
            align-items: center;
            padding-left: 60px;
            position: relative;
            >img {
                width: 100%;
                height: 43px;
                position: absolute;
                left: 0;
                top: 0;
            }

            >span {
                position: relative;
                color: #fff;
                font-size: 18px;
            }
        }
    }

    .qualified-status {
        width: 100%;
        height: 30px;
        margin-top: 10px;
        padding: 0 80px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >span {
            color: #00D2CC;
            font-size: 13px;
        }
    }

    >.qualified-data {
        width: 100%;
        height: 210px;
        box-sizing: border-box;
        display: flex;
        align-items: flex-end;

        .qualified-data-view {
            width: 100%;
            height: 100%;
            z-index: 99;
            display: flex;
            align-items: flex-end;

            .qualified-data-view-left {
                width: 50%;
                height: 100%;
            }

            .qualified-data-view-right {
                width: 50%;
                height: 100%;
                box-sizing: border-box;
            }
        }

        >img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
}
</style>
